<template>
  <div id="iphone13pro" v-if="data">
    <div class="f1" :class="{ viewpager: scrollTop > 0 }">
      <div class="center">
        <div class="box">
          <p>{{ data.toListTitle }}</p>
          <p>
            RMB{{ Math.ceil((typePrice + memeryPrice) / 24) }} /月 (24
            期)或RMB{{ typePrice + memeryPrice }}
          </p>
        </div>
      </div>
    </div>
    <div class="f2">
      <div class="center">
        <div class="box">
          <div class="row1">
            <h1>购买 {{ data.toListTitle }}</h1>
          </div>
          <div class="row2">
            <div class="img1">
              <a href="#" class="">折抵换购优惠 RMB 200 RMB 4300Footnote*</a>
            </div>
            <div class="img2">
              <a href="#" class=""> 可享最长 24 个月免息分期服务</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ***************************************************3-------------------------/ -->
    <div class="f3">
      <div class="center">
        <div
          class="box1"
          :class="{
            viewpager: scrollTop > 80 && scrollTop < boxHeight - 600,
            viewpagers: scrollTop >= boxHeight - 600,
          }"
        >
          <swiper class="swiper" :options="swiperOption">
            <swiper-slide v-for="x in slideshow" :key="x.sid">
              <img :src="x.imgs" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div
              class="swiper-button-prev swiper-button-black"
              slot="button-prev"
            ></div>
            <div
              class="swiper-button-next swiper-button-black"
              slot="button-next"
            ></div>
          </swiper>
        </div>
        <div class="box2" id="box2Content">
          <div class="box2-1">
            <h2>机型：<span> 哪一款适合你？</span></h2>
          </div>
          <div class="box2-2">
            <div
              class="row1"
              v-for="(x, i) in type"
              :key="x.nid"
              @click="iphoneType(i)"
              :class="{ active: typenow == i }"
            >
              <div class="text1">
                <h3>{{ x.title }}</h3>
                <p>6.1英寸显示屏<sup>1</sup></p>
              </div>
              <div class="text2">
                <p>
                  RMB {{ Math.ceil(x.price / 24) }}/月或<br />RMB
                  {{ x.price }}起
                </p>
              </div>
            </div>
          </div>
          <div class="box2-4">
            <h2>外观：<span>选择你喜欢的颜色。</span></h2>
            <div>颜色-{{ data.color.tit }}</div>
            <ul :class="{active3:typenow>-1}">
              <li
                v-for="(x, i) in color"
                :key="i"
                @click="iphoneColor(x, i)"
                :class="{ active2: colornow == i }"
              >
                <img class="" :src="x.img" />
              </li>
            </ul>
          </div>
          <div class="box2-5"  :class="{ active3: typenow >-1&&colornow >-1 }">
            <h2>存储容量：<span>你需要多大的存储空⁠间？</span></h2>
            <div
              class="row1"
              v-for="(x, i) in storage"
              :key="x.aid"
              @click="iphoneMemery(i)"
              :class="{ active: storagenow == i }"
            >
              <div class="text1">
                <h4>{{ x.size }} <sup>2</sup></h4>
              </div>
              <div class="text2">
                <p>
                  RMB {{ Math.ceil(x.prices / 24) }}/月或<br />RMB
                  {{ x.prices }}起
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="box_bottom" style="display:none"  v-if="storagenow < 0 || colornow < 0 || typenow < 0 " >
      <div class="center">
        <div >
          <h1>你的新</h1>
          <p>{{titleType}}</p>
          <h3>按你喜好和你心意。</h3>
          <div class="like">
          <img :src="Package_content[0].img" />
          </div>
        </div>
        <div>
          <p>{{titleType + titleColor + titleMemery}}</p>
          <h4>RMB {{ Math.ceil((typePrice + memeryPrice) / 24) }}/月 (24 期)</h4>
          <span>或</span>
          <h4>RMB {{ typePrice + memeryPrice }}</h4>
          <span>含增值税及其他法定税费：约 RMB 1,042‡。</span>
          <p><a href="" class="button2">可享免息分期付款</a></p>
          <div class="nei">
            <svg
              width="35"
              height="35"
              class="
                as-svgicon
                as-svgicon-bookmark
                as-svgicon-base
                as-svgicon-bookmarkbase
              "
              role="img"
              aria-hidden="true"
            >
              <path fill="none" d="M0 0h35v35H0z"></path>
              <path
                d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
              ></path>
            </svg>
            还拿不定主意？将此商品收藏到清单，方便回头再来挑选。
          </div>
          <div class="but">结账时会显示你所在地区的送货详情。</div>
        </div>
        <div>
          <div class="us">
            <img src="../assets/YYT_IMG/ipad-one.png" />
            预计发货日期：
          </div>
          <p>6-7 周</p>
          <p>免费送货</p>
          <a href="#">查看送货日期</a>
          <div class="us"> 
            <img src="../assets/YYT_IMG/ipad-two.png" />
            取货：
          </div>
          <a href="#">查看供货情况</a>
          <button class="button1" @click="addToShopBag">添加到购物袋</button>
        </div>
      </div>
    </div>
    <div class="box_bottom"  v-else >
      <div class="center">
        <div >
          <h1>你的新</h1>
          <p>{{titleType}}</p>
          <h3>按你喜好和你心意。</h3>
          <div class="like">
          <img :src="Package_content[0].img" />
          </div>
        </div>
        <div>
          <p>{{titleType + titleColor + titleMemery}}</p>
          <h4>RMB {{ Math.ceil((typePrice + memeryPrice) / 24) }}/月 (24 期)</h4>
          <span>或</span>
          <h4>RMB {{ typePrice + memeryPrice }}</h4>
          <span>含增值税及其他法定税费：约 RMB 1,042‡。</span>
          <p><a href="" class="button2">可享免息分期付款</a></p>
          <div class="nei">
            <svg
              width="35"
              height="35"
              class="
                as-svgicon
                as-svgicon-bookmark
                as-svgicon-base
                as-svgicon-bookmarkbase
              "
              role="img"
              aria-hidden="true"
            >
              <path fill="none" d="M0 0h35v35H0z"></path>
              <path
                d="M21.952 6.433a2.157 2.157 0 011.567.481A2.228 2.228 0 0124 8.516v19.866a.709.709 0 01-.018.178.7.7 0 01-.058-.013 8.985 8.985 0 01-.757-.674l-4.866-4.901a1.111 1.111 0 00-1.602 0l-4.857 4.891a7.25 7.25 0 01-.754.676.145.145 0 01-.053.028h-.015a.681.681 0 01-.02-.185V8.516a2.228 2.228 0 01.48-1.602 2.158 2.158 0 011.568-.48h8.904m0-1h-8.904a3.077 3.077 0 00-2.278.776A3.144 3.144 0 0010 8.516v19.866a1.276 1.276 0 00.276.868.956.956 0 00.76.317 1.073 1.073 0 00.632-.213 8.377 8.377 0 00.874-.776l4.866-4.9a.115.115 0 01.184 0l4.866 4.9a10.454 10.454 0 00.868.77 1.048 1.048 0 00.639.219.956.956 0 00.76-.317 1.276 1.276 0 00.275-.868V8.516a3.144 3.144 0 00-.77-2.306 3.077 3.077 0 00-2.278-.776z"
              ></path>
            </svg>
            还拿不定主意？将此商品收藏到清单，方便回头再来挑选。
          </div>
          <div class="but">结账时会显示你所在地区的送货详情。</div>
        </div>
        <div>
          <div class="us">
            <img src="../assets/YYT_IMG/ipad-one.png" />
            预计发货日期：
          </div>
          <p>6-7 周</p>
          <p>免费送货</p>
          <a href="#">查看送货日期</a>
          <div class="us"> 
            <img src="../assets/YYT_IMG/ipad-two.png" />
            取货：
          </div>
          <a href="#">查看供货情况</a>
          <button class="button1" @click="addToShopBag">添加到购物袋</button>
        </div>
      </div>
    </div>
    <!-- /**************************   5楼i************************************************* -->
    <div class="f5">
      <div class="center">
        <div class="box">
          <h2>包装内容</h2>
          <div class="box1">
            <div>
              <div class="box1-1">
                <img :src="Package_content[0].img" />
              </div>
              <p>{{ data.toListTitle }}</p>
            </div>
            <div>
              <div>
                <img :src="data.Package_content[1].img" />
              </div>
              <p>USB-C 转闪电连接线</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /////////////////////                       6楼                                     -->
    <div class="f6">
      <p>
        <span> 我们的环保目标。 </span><br />
        为了达成我们
        <a href="#" class="button2">2030 年实现碳中和</a>的目标，iPhone 13 Pro
        与 iPhone 13 Pro Max 不再随附电源适配器和 EarPods。包装盒内随附一根
        USB-C 转闪电连接线，可支持快速充电，并兼容 USB-C 电源适配器和电脑端口。
      </p>
      我们建议你重复使用现有的 USB-A
      转闪电连接线、电源适配器和耳机，它们均兼容这些 iPhone
      机型。但如果你需要任何新的 Apple 电源适配器或耳机，也可随时购买。
    </div>

    <!-- /*********************************  底面****************************************************/	 -->
    <ai-mei />
    <msg-mask ref="msgMaskbtn" />
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import AiMei from "@/components/AiMei.vue";
import Products from "@/plugins/Product";
import MsgMask from "@/components/MsgMask.vue";
export default {
  name: "swiper-example-space-between",
  title: "Space between slides",
  components: {
    Swiper,
    SwiperSlide,
    AiMei,
    MsgMask,
  },
  data() {
    return {
      storagenow: -1,
      colornow: -1,
      typenow: -1,
      data: null,
      scrollTop: null,
      boxHeight: 1384,
      slideshow: null,
      price: 0,
      typePrice: 0,
      memeryPrice: 0,
      titleType: "",
      titleMemery: "",
      titleColor: "",
      colorimg:"",
      iphone13: {
        title: "",
        price: 0,
        img: "",
        num: 1,
      },
      userBagData: null,
      productData: null,
      storage: "",
      Package_content: "",
      swiperOption: {
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          //   type: "progressbar",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  mounted() {
    this.getData();
    window.addEventListener("scroll", this.handleScroll, true); // 监听（绑定）滚轮滚动事件
  },
  //销毁,否则跳到别的路由还是会出现
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/product/16";
      axios.get(url).then((res) => {
        console.log(res.data);
        this.data = res.data;
        this.productData = res.data;

        //图片默认状态
        this.slideshow = res.data.slideshow;
        //机型获取
        this.type = res.data.proTitle;
        //颜色图片获取
        this.color = res.data.color.color;
        //存储获取
        this.storage = res.data.save;
        //底部图片默认状态
        this.Package_content = res.data.Package_content;
        return res;
      });
    },
    //机型点击事件
    iphoneType(i) {
      this.typenow = i;
      this.typePrice = this.data.proTitle[i].price;
      this.titleType = this.data.proTitle[i].title;
      window.scrollTo({
        top:400,
        behavior:"smooth"
      });
    },
    iphoneColor(e, i) {
      this.colornow = i;
      this.slideshow = this.data.ysslideshow[i];
      this.data.color.tit = this.data.color.title[i];
      this.Package_content[0].img = this.data.yss[i];
      this.titleColor = this.data.color.title[i];
      this.colorimg=this.data.color.colorimg[i]
      console.log(this.colorimg)
      window.scrollTo({
        top:700,
        behavior:"smooth"
      });
    },
    iphoneMemery(i) {
      this.memeryPrice = this.data.save[i].price;
      this.titleMemery = this.data.save[i].title;
      this.storagenow = i;
      window.scrollTo({
        top:1500,
        behavior:"smooth"
      });
    },


    handleScroll() {
      //这个滚动函数是声明在window里的，也就是说，其他人的页面也会有这个滚动函数，
      //但是并没有ipadpro里的各种对象，所以会报错，
      //故加一个if判断，当路由的路径是ipadPro时，才会运行这段代码
      // console.log(this.$route.path)
      let box2 = document.getElementById("box2Content");
      if (this.$route.path == "/iphone13" && this.data && box2) {
        this.scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        this.boxHeight = parseInt(getComputedStyle(box2, null)["height"]);
      }
    },
    addToShopBag() {
      let user = sessionStorage.getItem("user");
      //判断是否选择了商品
      if (this.storagenow < 0 && this.colornow < 0 && this.typenow < 0) {
        return;
      }
      // 判断是否登录过，否则就直接返回到登录页面
      if (user == "" || !user) {
        this.$refs.msgMaskbtn.setInformation({
          title: "未登录",
          // btnTitle:'去登陆',
          callback() {
            this.$router.push("/login");
          },
        });
        this.$refs.msgMaskbtn.showbtnMask();
        return;
      }

      //解析json字符串为js对象
      user = JSON.parse(user);

      //用户信息已经拿到了,接下来是拿到用户购物袋的信息
      let userurl = `http://localhost:3000/shopBagList?userId=${user.id}`;
      axios.get(userurl).then((res) => {
        this.userBagData = res.data;

        this.iphone13.title = this.titleType + this.titleColor + this.titleMemery;
        this.iphone13.price = this.typePrice + this.memeryPrice;
        console.log(this.iphone13.price)
        //图片 选择颜色后的手机图片
        this.iphone13.img = this.colorimg;

        let seemProduct = this.checkProductNum(this.iphone13.title);
        //商品在数据库里的数量如果不等于空
        //就代表着有重复着的数据
        if (seemProduct != null) {
          let url2 = `http://localhost:3000/shopBagList/${seemProduct.id}`;
          seemProduct.num += 1;
          // seemProduct 是重复的商品对象，也就是说其实数据不用更改，直接将之前的数据重写就好了
          // 另外需要将对象里的num数量+1
          axios.put(url2, seemProduct).then((res) => {
            this.$refs.msgMaskbtn.setInformation({
              title: "添加商品成功",
            });
            this.$refs.msgMaskbtn.showbtnMask();
          });
        } else {
          //这里是没找到重复商品的操作
          //正常的添加操作 post
          let url = `http://localhost:3000/user/${user.id}/shopBagList`;
          axios.post(url, this.iphone13).then((res) => {
            this.$refs.msgMaskbtn.setInformation({
              title: "添加商品成功",
            });
            this.$refs.msgMaskbtn.showbtnMask();
          });
        }
      });
    },
    checkProductNum(proTitle) {
      //检查用户列表下的商品数量
      //返回值 重复的商品对象
      //参数，需要进行检查的商品标题
      for (const e of this.userBagData) {
        if (e.title == proTitle) {
          return e;
        }
      }
      return null;
    },
  },
};
</script>

<style  scoped>
.swiper {
  --swiper-theme-color: #808080;
}
</style>
<style scoped src="../assets/css/iphone-13.css"/>